import Taro, { Component } from '@tarojs/taro'
import { View, Block, Text } from '@tarojs/components'
import { connect } from '@tarojs/redux'

import { fixed, unfixed, scroll, unscroll } from '../../actions/counter'
import allRequest from './../../api/allRequest'
import './filterMenu.less'


@connect(({ counter }) => ({
    counter
}), (dispatch) => ({
    fixed() {
        dispatch(fixed())
    },
    unfixed() {
        dispatch(unfixed())
    },
    scroll() {
        dispatch(scroll())
    },
    unscroll() {
        dispatch(unscroll())
    },
}))
class FilterMenu extends Component {

    static externalClasses = ['my-class']

    constructor(props) {
        super(props)
        this.state = {
            menuIndex: -1,

            menuTitles: [],
            menuItem: {},

            menuPost: [],

            //默认排序数据
            condition: {
                key: 'sort',
                value: ['default'],
                data: [{
                    label: '默认排序',
                    value: 'default',
                    children: []
                }, {
                    label: '最新发布',
                    value: 'new',
                    children: []
                }, {
                    label: '离我最近',
                    value: 'distance',
                    children: []
                }]
            },
            tempValue: 'default',

            //职位数据
            postData: [],
            postDataSec: [],
            postCur: [0, 0],

            //地区数据
            areaData: [],
            areaDataSec: [],
            areaCur: [1, 1],

            //导航栏展示
            menuLayerShow0: false,
            menuLayerShow1: false,
            menuLayerShow2: false,

            //导航栏标题
            morenTitle: '默认排序',
            postTitle: '全部职位',
            areaTitle: '全惠州市'
        }
    }

    componentWillReceiveProps(nextProps) {
        console.log(this.props, nextProps)
    }

    componentDidMount() {
        // const { menu, menuModalShow, eleHeight } = this.props;
        // this.setState({menu, menuModalShow, eleHeight})


        allRequest.industry()
            .then(res => {
                let temp = {
                    industry_title: '全部职位',
                    industry_id: 0,
                    position: [{
                        position_title: '全部职位',
                        position_id: 0,
                        templates: [],
                    }]
                }
                res.unshift(temp)
                this.setState({
                    postData: res,
                    postDataSec: res[0].position
                })
            })
            .catch(err => console.log(err));

        allRequest.area()
            .then(res => {
                let data = res
                let temp = []
                let tempSec = []
                //effect_level   1省级代理 2市级代理 3区级代理
                if (res.effect_level == 2) {
                    temp = res.cities
                    tempSec.push(res.cities[0])
                    for (let i = 0; i < temp[0].areas.length; i++) {
                        tempSec.push(temp[0].areas[i])
                    }
                } else if (res.effect_level == 3) {
                    temp = res.cities[0].areas
                    tempSec.push(res.cities[0].areas[0])
                    // for (let i = 0; i < temp[0].areas.length; i++) {
                    //     tempSec.push(temp[0].areas[i])
                    // }
                }
                this.setState({
                    areaData: temp,
                    areaDataSec: tempSec,
                    areaTitle: temp[0].name,
                    areaCur: [temp[0].code, temp[0].code],
                    effect_level: res.effect_level
                })
            })
            .catch(err => console.log(err));


    }

    componentWillUnmount() { }

    componentDidShow() { }

    componentDidHide() { }

    // 初始化获取菜单结果集
    getInitMenuResults() {
        let menuResults = []
        return menuResults
    }

    // 初始化菜单标题
    initMenuTitles(menuResults) {
        let menuTitles = []
        menuResults.forEach(item => {
            menuTitles.push(item.label)
        })
        this.setState({
            menuTitles
        })
    }

    // 更新菜单标题
    updateMenuTitles(menuIndex, label) {
        let menuTitles = this.state.menuTitles
        menuTitles[menuIndex] = label
        this.setState({
            menuTitles
        })
    }

    // 菜单标题点击
    menuTitleClick(index, e) {
        e.stopPropagation();
        //  三级代理暂不提供选择地区服务
        if (index == 2 && this.state.effect_level == 3) {
            return
        }
        let menuIndex = index
        this.props.scroll()
        this.setState({
            menuLayerShow0: false,
            menuLayerShow1: false,
            menuLayerShow2: false,
        })
        if (menuIndex === this.state.menuIndex) {
            this.hideMenuLayer()
            this.props.unfixed()
        } else {
            let temp = 'menuLayerShow' + menuIndex;

            this.setState({
                menuIndex,
                menuLayerShow: true,
                [temp]: true
            }, () => {
                this.props.fixed()

            })
        }
    }

    // 默认排序菜单点击
    menuSub1Tap(item, e) {
        e.stopPropagation()
        let { value, label } = item
        let { condition, tempValue } = this.state
        this.setState({
            tempValue: value
        })
        this.menuSelected('morenTitle', 'menuLayerShow1', label, { 'order': value })
    }

    // 职位菜单一级点击
    postSub1Tap(item, e) {
        e.stopPropagation()
        let postCur = this.state.postCur;
        postCur[0] = item.industry_id
        this.setState({
            postDataSec: item.position ? item.position : [],
            postCur,
        })
    }

    //职位菜单二级点击
    postSub2Tap(item, e) {
        e.stopPropagation()
        let postCur = this.state.postCur;
        postCur[1] = item.position_id
        this.setState({
            postCur,
        })
        this.menuSelected('postTitle', 'menuLayerShow0', item.position_title, { 'position_id': item.position_id })
    }

    //地区菜单二级点击
    areaSub2Tap(item, e) {
        e.stopPropagation()
        let areaCur = this.state.areaCur
        areaCur[1] = item.code
        this.setState({
            areaCur
        })
        this.menuSelected('areaTitle', 'menuLayerShow2', item.name, { 'area_id': item.code })
    }

    menuSelected(value, hideMenu, label, menuquery) {
        this.setState({
            [value]: label,
            [hideMenu]: false,
            menuLayerShow: false,
            menuIndex: -1,
        }, () => {
            this.props.onDealRefresh(menuquery)
            this.props.unfixed()
            this.props.unscroll()
        })
    }

    // 2级菜单点击
    menuSub2Tap(item, e) {
        e.stopPropagation()
        let { value, label } = item
        let { tempValue } = this.state
        this.menuSelectFinish({
            value: [tempValue[0], value],
            // value: [value],
            label
        })
    }

    // 菜单选择完成
    menuSelectFinish(menuResult) {
        let { menuItem, menuIndex } = this.state
        menuItem.value = menuResult.value
        this.setState({
            menuItem: menuItem
        })

        // 赋值key, 如果是二级菜单实际取值后一个
        menuResult.key = menuItem.key
        if (menuResult.value.length === 2) {
            menuResult.value = [menuResult.value[1]]
        }

        this.updateMenuTitles(menuIndex, menuResult.label)

        this.hideMenuLayer()
        // emit.
        this.props.onSelectFinish(menuResult)
        // this.$scope.triggerEvent('selectFinish', menuResult)
    }

    // 隐藏菜单选择层
    hideMenuLayer(e) {
        this.setState({
            menuIndex: -1,
            menuItem: {},
            tempValue: [],
            menuLayerShow: false,
            menuLayerShow0: false,
            menuLayerShow1: false,
            menuLayerShow2: false
        })
        this.props.unfixed()
        this.props.unscroll()
    }

    noop() { }

    getNodeByValue(nodes, value) {
        var i = 0;
        var l = nodes.length;

        for (; i < l; i++) {
            if (nodes[i].value === value) {
                return nodes[i];
            }
        }

        return {};
    }

    render() {
        let { menuLayerShow, tempValue, condition, menuLayerShow0, menuLayerShow1, menuLayerShow2, morenTitle, postData, postDataSec,
            postCur, postTitle, areaData, areaDataSec, areaCur, areaTitle, effect_level } = this.state
        return (
            <View className='filterMenu'>
                {/* <View className={`menu-layer ${menuLayerShow && 'fixed'}`}onClick={this.hideMenuLayer.bind(this)} style={`${this.props.eleHeight != 0 || this.props.counter.fixed ? 'top:79px;position:fixed;width:100%;z-index:999' : ''}`}> */}
                <View className={`menu-layer ${menuLayerShow && 'fixed'}`} onClick={this.hideMenuLayer.bind(this)} style={`top:23%;${this.props.isSearch ? '' : 'position:fixed;'}width:100%;z-index:5`} >

                    <View className={`menu ${!menuLayerShow && 'fake'}`}>
                        <Block>
                            <View className='item'
                                onClick={this.menuTitleClick.bind(this, 2)}>
                                <View className='text'>{areaTitle}</View>
                                {/* 区级代理暂不提供选择地区服务 */}
                                {effect_level != 3 && <View className='icon'></View>}
                            </View>
                        </Block>
                        <Block>
                            <View className='item'
                                onClick={this.menuTitleClick.bind(this, 0)}>
                                <View className='text'>{postTitle}</View>
                                <View className='icon'></View>
                            </View>
                        </Block>
                        <Block>
                            <View className='item'
                                onClick={this.menuTitleClick.bind(this, 1)}>
                                <View className='text'>{morenTitle}</View>
                                <View className='icon' style='margin-right:20px'></View>
                            </View>
                        </Block>
                    </View>
                    {
                        menuLayerShow1 && <Block>
                            <View className='menu-sub' onClick={this.noop.bind(this)}>
                                <View className='menu-sub-1'>
                                    {
                                        condition.data.map((item, index) => <Block>
                                            <View className={`item ${item.value === tempValue && 'current'}`}
                                                onClick={this.menuSub1Tap.bind(this, item)}>
                                                <Text className='text'>{item.label}</Text>
                                            </View>
                                        </Block>)
                                    }
                                </View>
                                {/* {
                                    condition.value && condition.value.length === 2 && <View className='menu-sub-2'>
                                        {
                                            this.getNodeByValue(condition.data, tempValue[0]).children.map((item, index) => <Block>
                                                <View className={`item ${item.value === tempValue[1] && 'current'}`}
                                                    onClick={this.menuSub2Tap.bind(this, item)}>
                                                    <Text className='text'>{item.label}</Text>
                                                </View>
                                            </Block>)
                                        }
                                    </View>
                                } */}
                            </View>
                        </Block>
                    }
                    {
                        menuLayerShow0 && postData.length > 0 && <Block>
                            <View className='menu-sub' onClick={this.noop.bind(this)}>
                                <View className='menu-sub-1'>
                                    {
                                        postData.map((item, index) => <Block>
                                            <View className={`item ${item.industry_id === postCur[0] && 'current'}`}
                                                onClick={this.postSub1Tap.bind(this, item)}>
                                                <Text className='text'>{item.industry_title}</Text>
                                            </View>
                                        </Block>)
                                    }
                                </View>
                                {
                                    postDataSec.length > 0 && <View className='menu-sub-2'>
                                        {
                                            postDataSec.map((item, index) => <Block>
                                                <View className={`item ${item.position_id === postCur[1] && 'current'}`}
                                                    onClick={this.postSub2Tap.bind(this, item)}>
                                                    <Text className='text'>{item.position_title}</Text>
                                                </View>
                                            </Block>)
                                        }
                                    </View>
                                }
                            </View>
                        </Block>
                    }
                    {
                        menuLayerShow2 && areaData.length > 0 && <Block>
                            <View className='menu-sub' onClick={this.noop.bind(this)}>
                                <View className='menu-sub-1'>
                                    {
                                        areaData.map((item, index) => <Block>
                                            <View className={`item ${item.code === areaCur[0] && 'current'}`}>
                                                <Text className='text'>{item.name}</Text>
                                            </View>
                                        </Block>)
                                    }
                                </View>
                                {
                                    areaDataSec.length > 0 && <View className='menu-sub-2'>
                                        {
                                            areaDataSec.map((item, index) => <Block>
                                                <View className={`item ${item.code === areaCur[1] && 'current'}`}
                                                    onClick={this.areaSub2Tap.bind(this, item)}>
                                                    <Text className='text'>{item.name}</Text>
                                                </View>
                                            </Block>)
                                        }
                                    </View>
                                }
                            </View>
                        </Block>
                    }

                </View>
            </View>
        )
    }
}

export default FilterMenu
